<template>
<view>
<!--<import src="../../../../utils/wxParse/wxParse.wxml"></import>-->
<view class="mesg_detail">
    <text class="mesg_title">{{message_details.message_title}}</text>
    <view class="mesg_info">
        <text>类型：{{message_details.category_name}}</text>
        <text>时间：{{message_details.send_time_texts}}</text>
    </view>
    <view class="mesg_content">
        <jyf-parser :html="article_message_content"></jyf-parser>
    </view>
</view>
</view>
</template>

<script>

// pages/user/active_mesg/msg_info/msg_info.js
var app = getApp();
var request = app.globalData.request;

export default {
  data() {
    return {
      message_details: "",
      article_message_content: ""
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    app.globalData.showLoading(null, 1500);

    if (!options.rec_id) {
      uni.showModal({
        title: '获取提示',
        content: '未传入消息ID',
        showCancel: false
      });
      return;
    }

    var that = this;
    var url = '/api/message/getMessageDetails?rec_id=' + options.rec_id;
    request.get(url, {
      success: function (res) {
        that.setData({
          message_details: res.data.result
        });
        //WxParse.wxParse('message_content', 'html', res.data.result.message_content, that, 5)
        setTimeout(() => {
          that.article_message_content = res.data.result.message_content;
        }, 200);
      }
    });
  },
  onShareAppMessage: function () {},
  methods: {}
};
</script>
<style>

.mesg_detail {
    width: 92%;
    height: auto;
    text-align: center;
    padding: 0 4%;
    padding-top: 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mesg_title{
  font-weight: bold
}

.mesg_info {
  color: #999;
  font-size: 9pt;
  margin-top: 20rpx;
  display: flex;
  flex-direction: row;
  align-content: space-between;
}

.mesg_info text{
  display: block;
  margin: 0 10rpx;
}

.mesg_content{
  margin-top: 20rpx;
  font-size: 11pt;
  color: #333;
  text-align: justify;
  vertical-align: middle
}
</style>